<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, computed, onMounted } from 'vue';
import { Search, Operation, Close } from '@element-plus/icons-vue'
import { ElMessageBox, ElNotification, ElForm } from 'element-plus';

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref('default')
const disabled = ref(false)
const background = ref(false)

// 表头数据
const columns = [
    { title: '线索名称', key: 'clueName', sortable: true },
    { title: '跟进负责人', key: 'follower', sortable: true },
    { title: '上次联系时间', key: 'lastContactTime', sortable: true },
    { title: '线索状态', key: 'clueStatus', filterable: true },
    { title: '下次联系时间', key: 'nextContactTime', sortable: true },
    { title: '客户来源', key: 'customerSource', filterable: true },
    { title: '跟进阶段', key: 'followStage', filterable: true },
    { title: '最近分配时间', key: 'lastAssignTime', sortable: true },
    { title: '意向产品', key: 'intendedProduct' },
    { title: '所属部门', key: 'department', sortable: true },
    { title: '线索创建时间', key: 'createTime', sortable: true },
    { title: '增值税类型', key: 'taxType', filterable: true },
    { title: '线索提交人', key: 'submitter', sortable: true },
    { title: '线索创建人', key: 'creator', sortable: true },
    { title: '成立时间', key: 'establishTime', sortable: true }
];

// 数据状态
const allData = ref([])
const loading = ref(true)
const searchText = ref('')
const includeFinished = ref(false)
const activeTab = ref('first')

// 筛选表单 - 扩展所有要求的字段
const filterForm = ref({
    follower: '',
    clueStatus: '',
    customerSource: '',
    followStage: '',
    clueLevel: '',
    department: '',
    nextContactTimeRange: [],
    lastContactTimeRange: [],
    lastAssignTimeRange: [],
    createTimeRange: [],
    taxType: '',
    submitter: '',
    sharedPerson: '',
    creator: '',
    establishTimeRange: [],
    expectedDealTimeRange: [],
    expectedDealAmount: ''
})

// 下拉选项数据
const filterOptions = ref({
    follower: ['张三', '李四', '王五', '赵六', '孙八', '吴十', '陈十二', '杨十四'],
    clueStatus: ['待处理', '跟进中', '已转化', '已成交', '已丢单'],
    customerSource: ['官网注册', '渠道推荐', '市场活动', '线上广告', '客户转介绍', '电话营销', '合作伙伴', '展会获客'],
    followStage: ['初步接触', '需求分析', '方案演示', '方案报价', '商务谈判', '成交', '初次联系', '成交完成', '丢单'],
    clueLevel: ['高', '中', '低'],
    department: ['销售一部', '销售二部', '销售三部'],
    taxType: ['一般纳税人', '小规模纳税人'],
    submitter: ['李四', '王五', '赵六', '钱七', '周九', '郑十一', '林十三', '黄十五', '马十七', '周十九', '张二十一', '赵二十三', '林二十五'],
    sharedPerson: ['张三', '李四', '王五', '赵六', '孙八', '吴十'],
    creator: ['系统', '张三', '李四', '王五', '赵六', '孙八', '吴十', '陈十二', '杨十四', '黄十八', '王二十', '李二十二', '陈二十四'],
    expectedDealAmount: ['10万以下', '10-50万', '50-100万', '100-500万', '500万以上']
})

// 编辑表单
const editForm = ref({
    id: '', // 添加唯一标识
    clueName: '',
    follower: '',
    lastContactTime: '',
    clueStatus: '',
    nextContactTime: '',
    customerSource: '',
    followStage: '',
    lastAssignTime: '',
    intendedProduct: '',
    department: '',
    createTime: '',
    taxType: '',
    submitter: '',
    creator: '',
    establishTime: ''
})

// 侧边栏相关
const editPanelVisible = ref(false)
const dialogTitle = ref('修改线索信息')
const editFormRef = ref(null)

// 回收站
const RecycleBin = ref([])

// 获取所有线索数据
const getAllCluesData = () => {
    // 为每条数据添加唯一ID
    return [
        {
            id: 1,
            clueName: '北京科技有限公司',
            follower: '张三',
            lastContactTime: '2024-01-15 10:30',
            clueStatus: '待处理',
            nextContactTime: '2024-01-20 14:00',
            customerSource: '官网注册',
            followStage: '初步接触',
            lastAssignTime: '2024-01-10 09:00',
            intendedProduct: '企业版SaaS',
            department: '销售一部',
            createTime: '2024-01-10 08:30',
            taxType: '一般纳税人',
            submitter: '李四',
            creator: '系统',
            establishTime: '2020-05-15'
        },
        {
            id: 2,
            clueName: '上海贸易有限公司',
            follower: '李四',
            lastContactTime: '2024-01-14 16:20',
            clueStatus: '跟进中',
            nextContactTime: '2024-01-18 11:00',
            customerSource: '渠道推荐',
            followStage: '需求分析',
            lastAssignTime: '2024-01-08 14:30',
            intendedProduct: '专业版CRM',
            department: '销售二部',
            createTime: '2024-01-08 10:15',
            taxType: '小规模纳税人',
            submitter: '王五',
            creator: '张三',
            establishTime: '2019-08-20'
        },
        {
            id: 3,
            clueName: '广州制造企业',
            follower: '王五',
            lastContactTime: '2024-01-12 15:45',
            clueStatus: '已转化',
            nextContactTime: '-',
            customerSource: '市场活动',
            followStage: '成交',
            lastAssignTime: '2024-01-05 11:20',
            intendedProduct: '定制化ERP',
            department: '销售三部',
            createTime: '2024-01-05 09:45',
            taxType: '一般纳税人',
            submitter: '赵六',
            creator: '李四',
            establishTime: '2018-12-10'
        },
        {
            id: 4,
            clueName: '深圳互联网公司',
            follower: '赵六',
            lastContactTime: '2024-01-16 09:15',
            clueStatus: '跟进中',
            nextContactTime: '2024-01-22 10:30',
            customerSource: '线上广告',
            followStage: '方案演示',
            lastAssignTime: '2024-01-12 16:00',
            intendedProduct: '基础版OA',
            department: '销售一部',
            createTime: '2024-01-12 14:20',
            taxType: '小规模纳税人',
            submitter: '钱七',
            creator: '系统',
            establishTime: '2021-03-25'
        },
        {
            id: 5,
            clueName: '杭州电商企业',
            follower: '孙八',
            lastContactTime: '2024-01-13 14:30',
            clueStatus: '待处理',
            nextContactTime: '2024-01-19 15:00',
            customerSource: '客户转介绍',
            followStage: '初次联系',
            lastAssignTime: '2024-01-11 13:45',
            intendedProduct: '电商解决方案',
            department: '销售二部',
            createTime: '2024-01-11 11:30',
            taxType: '一般纳税人',
            submitter: '周九',
            creator: '王五',
            establishTime: '2022-07-18'
        },
        {
            id: 6,
            clueName: '南京教育机构',
            follower: '吴十',
            lastContactTime: '2024-01-10 11:00',
            clueStatus: '已成交',
            nextContactTime: '-',
            customerSource: '官网注册',
            followStage: '成交完成',
            lastAssignTime: '2024-01-03 10:15',
            intendedProduct: '教育行业版',
            department: '销售三部',
            createTime: '2024-01-03 08:45',
            taxType: '小规模纳税人',
            submitter: '郑十一',
            creator: '赵六',
            establishTime: '2017-09-12'
        },
        {
            id: 7,
            clueName: '成都医疗企业',
            follower: '陈十二',
            lastContactTime: '2024-01-08 16:45',
            clueStatus: '已丢单',
            nextContactTime: '-',
            customerSource: '渠道合作',
            followStage: '丢单',
            lastAssignTime: '2024-01-02 14:30',
            intendedProduct: '医疗管理系统',
            department: '销售一部',
            createTime: '2024-01-02 12:20',
            taxType: '一般纳税人',
            submitter: '林十三',
            creator: '孙八',
            establishTime: '2016-11-05'
        },
        {
            id: 8,
            clueName: '武汉零售公司',
            follower: '杨十四',
            lastContactTime: '2024-01-09 13:20',
            clueStatus: '跟进中',
            nextContactTime: '2024-01-25 09:00',
            customerSource: '市场活动',
            followStage: '方案报价',
            lastAssignTime: '2024-01-04 15:40',
            intendedProduct: '零售POS系统',
            department: '销售二部',
            createTime: '2024-01-04 10:55',
            taxType: '小规模纳税人',
            submitter: '黄十五',
            creator: '吴十',
            establishTime: '2023-02-14'
        }
    ]
}

// 计算属性：根据筛选条件过滤数据
const filteredData = computed(() => {
    let data = [...allData.value];
    
    // 标签页筛选
    if (activeTab.value === 'second') {
        data = data.filter(item => item.clueStatus === '待首次跟进');
    } else if (activeTab.value === 'third') {
        data = data.filter(item => item.clueStatus === '待联系');
    }
    
    // 是否包含已成交/已丢单
    if (!includeFinished.value) {
        data = data.filter(item => 
            item.clueStatus !== '已成交' && item.clueStatus !== '已丢单'
        );
    }
    
    // 搜索框筛选
    if (searchText.value) {
        const keyword = searchText.value.toLowerCase();
        data = data.filter(item => 
            item.clueName.toLowerCase().includes(keyword) || 
            item.intendedProduct.toLowerCase().includes(keyword)
        );
    }
    
    // 高级筛选条件 - 使用下拉框的字段
    const filterFields = [
        'follower', 'clueStatus', 'customerSource', 'followStage', 
        'clueLevel', 'department', 'taxType', 'submitter', 
        'sharedPerson', 'creator', 'expectedDealAmount'
    ];
    
    filterFields.forEach(field => {
        if (filterForm.value[field]) {
            data = data.filter(item => item[field] === filterForm.value[field]);
        }
    });
    
    // 日期范围筛选
    const dateRangeFields = [
        { field: 'nextContactTimeRange', dataField: 'nextContactTime' },
        { field: 'lastContactTimeRange', dataField: 'lastContactTime' },
        { field: 'lastAssignTimeRange', dataField: 'lastAssignTime' },
        { field: 'createTimeRange', dataField: 'createTime' },
        { field: 'establishTimeRange', dataField: 'establishTime' },
        { field: 'expectedDealTimeRange', dataField: 'expectedDealTime' }
    ];
    
    dateRangeFields.forEach(({ field, dataField }) => {
        if (filterForm.value[field] && filterForm.value[field].length === 2) {
            const [start, end] = filterForm.value[field];
            data = data.filter(item => {
                if (!item[dataField] || item[dataField] === '-') return false;
                const itemDate = new Date(item[dataField].split(' ')[0]);
                return itemDate >= new Date(start) && itemDate <= new Date(end);
            });
        }
    });
    
    return data;
});


const deleteClue = (row) => {
    ElMessageBox.confirm(
        `确定要删除线索"${row.clueName}"吗？`,
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 复制要删除的数据并添加删除时间
        const itemToDelete = {
            ...row,
            deletedTime: new Date().toISOString() // 记录删除时间
        };
        
        // 从原数据中移除
        allData.value = allData.value.filter(item => item.id !== row.id);
        
        // 添加到回收站
        RecycleBin.value.push(itemToDelete);
        
        ElNotification.success({
            title: '删除成功',
            message: '线索已移至回收站',
        });
    }).catch(() => {
        // 取消删除
    });
};

// 分页数据
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredData.value.slice(start, end);
});

// 标签页切换
const handleTabClick = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 500);
}

// 应用筛选条件
const applyFilter = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 500);
}

// 重置筛选条件
const resetFilter = () => {
    filterForm.value = {
        follower: '',
        clueStatus: '',
        customerSource: '',
        followStage: '',
        clueLevel: '',
        department: '',
        nextContactTimeRange: [],
        lastContactTimeRange: [],
        lastAssignTimeRange: [],
        createTimeRange: [],
        taxType: '',
        submitter: '',
        sharedPerson: '',
        creator: '',
        establishTimeRange: [],
        expectedDealTimeRange: [],
        expectedDealAmount: ''
    };
    applyFilter();
}

// 分页处理
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageSize.value = val;
}

const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    currentPage.value = val;
}

// 打开编辑侧边栏
const openEditPanel = (row) => {
    editForm.value = { ...row };
    editPanelVisible.value = true;
    // 阻止页面滚动
    document.body.style.overflow = 'hidden';
}

// 关闭侧边栏
const closeEditPanel = () => {
    editPanelVisible.value = false;
    // 恢复页面滚动
    document.body.style.overflow = '';
    // 重置表单
    editForm.value = {
        id: '',
        clueName: '',
        follower: '',
        lastContactTime: '',
        clueStatus: '',
        nextContactTime: '',
        customerSource: '',
        followStage: '',
        lastAssignTime: '',
        intendedProduct: '',
        department: '',
        createTime: '',
        taxType: '',
        submitter: '',
        creator: '',
        establishTime: ''
    };
}

// 保存修改
const saveEdit = async () => {
    // 表单验证
    if (!editFormRef.value) return;
    
    try {
        await editFormRef.value.validate();
        
        // 更新本地数据
        const index = allData.value.findIndex(item => item.id === editForm.value.id);
        if (index !== -1) {
            allData.value[index] = { ...editForm.value };
            
            ElNotification.success({
                title: '保存成功',
                message: '线索信息已更新'
            });
            
            closeEditPanel();
        }
    } catch (error) {
        console.log('表单验证失败', error);
        return;
    }
}

// 表单验证规则
const rules = ref({
    clueName: [
        { required: true, message: '请输入线索名称', trigger: 'blur' }
    ],
    follower: [
        { required: true, message: '请输入跟进负责人', trigger: 'blur' }
    ]
})

// 初始化数据
onMounted(() => {
    setTimeout(() => {
        allData.value = getAllCluesData();
        loading.value = false;
    }, 1000);
})
</script>

<template>
    <div class="my-clue">
        <div class="top-filter">
            <div class="top-filter-left">
                <stick-popup>
                    <template #show>
                        <div class="top-filter-btn">
                            <div class="top-filter-btn-label">筛选</div>
                            <div class="top-filter-btn-icon">
                                <Operation />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <div class="top-filter-form">
                            <el-form :model="filterForm" label-width="120px">
                                <el-form-item label="跟进负责人">
                                    <el-select v-model="filterForm.follower" placeholder="请选择跟进负责人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.follower" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索状态">
                                    <el-select v-model="filterForm.clueStatus" placeholder="请选择线索状态" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.clueStatus" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="客户来源">
                                    <el-select v-model="filterForm.customerSource" placeholder="请选择客户来源" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.customerSource" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="跟进阶段">
                                    <el-select v-model="filterForm.followStage" placeholder="请选择跟进阶段" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.followStage" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索等级">
                                    <el-select v-model="filterForm.clueLevel" placeholder="请选择线索等级" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.clueLevel" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="所属部门">
                                    <el-select v-model="filterForm.department" placeholder="请选择所属部门" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.department" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="下次联系时间">
                                    <el-date-picker
                                        v-model="filterForm.nextContactTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="上次联系时间">
                                    <el-date-picker
                                        v-model="filterForm.lastContactTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="最近分配时间">
                                    <el-date-picker
                                        v-model="filterForm.lastAssignTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="线索创建时间">
                                    <el-date-picker
                                        v-model="filterForm.createTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="增值税类型">
                                    <el-select v-model="filterForm.taxType" placeholder="请选择增值税类型" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.taxType" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索提交人">
                                    <el-select v-model="filterForm.submitter" placeholder="请选择线索提交人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.submitter" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索共享人">
                                    <el-select v-model="filterForm.sharedPerson" placeholder="请选择线索共享人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.sharedPerson" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索创建人">
                                    <el-select v-model="filterForm.creator" placeholder="请选择线索创建人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.creator" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="成立日期">
                                    <el-date-picker
                                        v-model="filterForm.establishTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="预计成交时间">
                                    <el-date-picker
                                        v-model="filterForm.expectedDealTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="预计成交金额">
                                    <el-select v-model="filterForm.expectedDealAmount" placeholder="请选择预计成交金额" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.expectedDealAmount" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="top-filter-operate">
                            <el-button @click="resetFilter">重置</el-button>
                            <el-button type="primary" @click="applyFilter">确定</el-button>
                        </div>
                    </template>
                </stick-popup>
                <div class="top-filter-search">
                     <el-input
                        v-model="searchText"
                        placeholder="输入线索名称或意向产品"
                        >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </div>
                <div class="top-filter-checkbox">
                    <el-checkbox v-model="includeFinished" label="包含已成交、丢单" size="default" border />
                </div>
            </div>
            <div class="top-filter-right">
                <el-button type="primary">导入线索</el-button>
                <el-button type="primary">新客户线索</el-button>
                <el-button type="primary">老客户线索</el-button>
                <el-button type="primary">导出</el-button>
            </div>
        </div>
        
        <div class="table-area">
            <div class="table-area-table">
                <my-table 
                    :loading="loading" 
                    :columns="columns" 
                    :dataSource="paginatedData" 
                    :showIndex="true" 
                    :show-operation="true"
                >
                    <template #data-clueStatus="scope">
                        <el-tag :type="scope.data === '待处理' ? 'warning' : scope.data === '跟进中' ? 'primary' : scope.data === '已转化' ? 'success' : scope.data === '已成交' ? 'success' : 'danger'">
                            {{ scope.data }}
                        </el-tag>
                    </template>
                    <template #filter-clueStatus>
                        <span>线索状态</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-customerSource>
                        <span>客户来源</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-followStage>
                        <span>跟进阶段</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-taxType>
                        <span>增值税类型</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #operation="scope">
                        <el-button type="text" @click="openEditPanel(scope.row)">修改</el-button>
                        <el-button type="text" @click="deleteClue(scope.row)">删除</el-button>
                    </template>
                </my-table>
            </div>
            <div class="table-pagination">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="filteredData.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    >
                </el-pagination>
            </div>
        </div>

        <!-- 侧边编辑面板 - 保留双列布局 -->
        <div class="edit-overlay" v-if="editPanelVisible" @click="closeEditPanel"></div>
        <div class="edit-panel" :class="{ 'edit-panel-visible': editPanelVisible }">
            <div class="edit-panel-header">
                <h3>{{ dialogTitle }}</h3>
                <el-button icon="Close" circle @click="closeEditPanel" />
            </div>
            <div class="edit-panel-body">
                <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="线索名称" prop="clueName">
                                <el-input v-model="editForm.clueName" placeholder="请输入线索名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="跟进负责人" prop="follower">
                                <el-select v-model="editForm.follower" placeholder="请选择跟进负责人" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.follower" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="线索状态">
                                <el-select v-model="editForm.clueStatus" placeholder="请选择线索状态" style="width: 100%">
                                    <el-option label="待处理" value="待处理"></el-option>
                                    <el-option label="跟进中" value="跟进中"></el-option>
                                    <el-option label="已转化" value="已转化"></el-option>
                                    <el-option label="已成交" value="已成交"></el-option>
                                    <el-option label="已丢单" value="已丢单"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="跟进阶段">
                                <el-select v-model="editForm.followStage" placeholder="请选择跟进阶段" style="width: 100%">
                                    <el-option label="初步接触" value="初步接触"></el-option>
                                    <el-option label="需求分析" value="需求分析"></el-option>
                                    <el-option label="方案演示" value="方案演示"></el-option>
                                    <el-option label="方案报价" value="方案报价"></el-option>
                                    <el-option label="商务谈判" value="商务谈判"></el-option>
                                    <el-option label="成交" value="成交"></el-option>
                                    <el-option label="初次联系" value="初次联系"></el-option>
                                    <el-option label="成交完成" value="成交完成"></el-option>
                                    <el-option label="丢单" value="丢单"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="客户来源">
                                <el-select v-model="editForm.customerSource" placeholder="请选择客户来源" style="width: 100%">
                                    <el-option label="官网注册" value="官网注册"></el-option>
                                    <el-option label="渠道推荐" value="渠道推荐"></el-option>
                                    <el-option label="市场活动" value="市场活动"></el-option>
                                    <el-option label="线上广告" value="线上广告"></el-option>
                                    <el-option label="客户转介绍" value="客户转介绍"></el-option>
                                    <el-option label="电话营销" value="电话营销"></el-option>
                                    <el-option label="合作伙伴" value="合作伙伴"></el-option>
                                    <el-option label="展会获客" value="展会获客"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="增值税类型">
                                <el-select v-model="editForm.taxType" placeholder="请选择增值税类型" style="width: 100%">
                                    <el-option label="一般纳税人" value="一般纳税人"></el-option>
                                    <el-option label="小规模纳税人" value="小规模纳税人"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="意向产品">
                                <el-input v-model="editForm.intendedProduct" placeholder="请输入意向产品" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属部门">
                                <el-select v-model="editForm.department" placeholder="请选择所属部门" style="width: 100%">
                                    <el-option label="销售一部" value="销售一部"></el-option>
                                    <el-option label="销售二部" value="销售二部"></el-option>
                                    <el-option label="销售三部" value="销售三部"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="线索提交人">
                                <el-select v-model="editForm.submitter" placeholder="请选择线索提交人" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.submitter" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="线索创建人">
                                <el-select v-model="editForm.creator" placeholder="请选择线索创建人" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.creator" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="上次联系时间">
                                <el-date-picker
                                    v-model="editForm.lastContactTime"
                                    type="datetime"
                                    placeholder="选择上次联系时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="下次联系时间">
                                <el-date-picker
                                    v-model="editForm.nextContactTime"
                                    type="datetime"
                                    placeholder="选择下次联系时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="最近分配时间">
                                <el-date-picker
                                    v-model="editForm.lastAssignTime"
                                    type="datetime"
                                    placeholder="选择最近分配时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="线索创建时间">
                                <el-date-picker
                                    v-model="editForm.createTime"
                                    type="datetime"
                                    placeholder="选择线索创建时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="成立时间">
                                <el-date-picker
                                    v-model="editForm.establishTime"
                                    type="date"
                                    placeholder="选择成立时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- 占位列，保持布局平衡 -->
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="edit-panel-footer">
                <el-button @click="closeEditPanel">取消</el-button>
                <el-button type="primary" @click="saveEdit">确定</el-button>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.my-clue {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    position: relative;
}
.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}
.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;
        cursor: pointer;
        .top-filter-btn-icon {
            width: 20px;
            height: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .top-filter-search {
        width: 200px;
    }
}
.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    .table-area-tab {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 16px;
    }
    .table-area-table {
        width: 100%;
        box-sizing: border-box;
    }
    .table-pagination{
        width: 100%;
        margin: 20px 0 0 0;
        display: flex;
        justify-content: center;
        padding-bottom: 20px;
    }
}

.top-filter-form, .top-filter-operate {
    width: 500px;
    background-color: #fff;
    display: flex;
    align-items: left;
}

.top-filter-form {
    padding: 10px;
}

// 侧边编辑面板样式
.edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: opacity 0.3s;
}

.edit-panel {
    position: fixed;
    top: 0;
    right: -600px; /* 初始位置在右侧外部 */
    width: 600px;
    height: 100vh;
    background-color: #fff;
    z-index: 1001;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.edit-panel-visible {
    right: 0; /* 显示时滑入 */
}

.edit-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-panel-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto; /* 允许表单区域滚动 */
}

.edit-panel-footer {
    padding: 16px 20px;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

// 表单样式调整
:deep(.el-form-item) {
    margin-bottom: 18px;
}

:deep(.el-select), :deep(.el-input), :deep(.el-date-picker) {
    width: 100%;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
</style>